<template>
	<view class="content">
		<!-- 顶部高度隔离 -->
		<view class="top-height" ref="topHeight"></view>
		
		<!-- 顶部导航条 Notifications Messages -->
		<u-tabs-swiper 
		class="tableswiper"
		ref="uTabs" 
		:list="list" 
		:current="current" 
		@change="tabsChange" 
		:is-scroll="false"
		active-color="#ffffff"
		inactive-color="#959595"
		swiperWidth="750"
		bar-width="375"
		bg-color="#222222"
		:bar-style="barstyle"
		></u-tabs-swiper>
		<!-- 信息列表 -->
		<swiper style="height: calc(100vh);" class="itemswiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item  class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view v-if="item.msgList" scroll-y ref="scrollview" style="height: calc(100vh);width: 100%; color: #FFFFFF;" @scrolltolower="onreachBottom">
					<!-- 内部展示数据列表 -->
					<message-item v-if="item.msgList" v-for="(subitem,subindex) in item.msgList" :key="subindex"
					:avatarSrc="subitem.avatar"
					:message="subitem.message"
					:datatime="subitem.lasttime">
					</message-item>
				</scroll-view>
				<view v-else class="msgbox">
					<view style="height: 400rpx;">
					</view>
					<view>
						<u-icon name="email" size="200"></u-icon>
						<view>No Messages Yet</view>
					</view>
					<view style="height: 400rpx;">
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		
		
		
	</view>
</template>

<script>
	
	import messageItem from "@/components/message-item.vue"
	import uTabsSwiper from "@/uviewui/components/u-tabs-swiper/u-tabs-swiper.vue"
	
	export default {
		async onLoad() {
			//获取TypeMsg的数据
			await this.$u.api.getTypeMsg().then(res=>{
				console.log('TypeMsg数据获取成功')
				if(res.success){
					this.$data.list[0].name = res.data[0].typename;
					this.$data.list[0].count = res.data[0].count
					this.$data.list[1].name = res.data[1].typename;
					this.$data.list[1].count = res.data[1].count
					console.log(this.$data.list[1].count)
				}
			}).catch(err=>{
				console.log('TypeMsg数据获取失败')
				console.log(err)
			})
			
			
			//消息数据list
			await this.$u.api.getMsgList('/0','/11').then(res=>{
				console.log('MsgList数据获取成功')
				if(res.success){
					res.data.forEach(item=>{
						if(item.type_msg_id === 1){
							this.$data.list[0].msgList.push(item)
						}else{
							this.$data.list[1].msgList.push(item)
						}
					})
				}
			}).catch(err=>{
				console.log('MsgList数据获取失败')
				console.log(err)
			})
			
		},
		components:{
			uTabsSwiper,
			messageItem
		},
		data() {
			return {
				//swiper list数据
				list:[
						//Notifications 选项卡
						{
								name: '',	//显示的名称
								count:'',				//角标显示的数字
								badgeBgColor:"#53B49B",	//角标的背景色
								msgList:[]
						},
						{
								name: '',	//名称
								count:'',				//角标显示的数字
								badgeBgColor:"#53B49B",	//角标的背景色
								msgList:[]
						}
					],
					// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
					current: 0, // tabs组件的current值，表示当前活动的tab选项
					swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
					barstyle:{
						"background-color":"#53B49B"
					},
					swiperHeight:0

			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom(e){
				
				uni.getSystemInfo({
					success:function(res) {
						
						// console.log(res.windowHeight)
						//获取顶部隔离的组件
						let topHeight=uni.createSelectorQuery().select('.top-height');
						//获取swiper组件
						let tableswiper=uni.createSelectorQuery().select('.tableswiper');
						let topHeightH = 0;
						let tableswiperH = 0;
						//得到顶部隔离的组件高度
						topHeight.boundingClientRect(data => {
							  // console.log("得到布局位置信息" + JSON.stringify(data));
							  // console.log("节点离页面顶部的距离为" + data.top);
							  // 计算高度值并赋值
							  //this.mainClientHeight=data.height;
							  // this.mainClientHeight=data.height;
							  // console.log('topHeight:'+data.height);
							  topHeightH = data.height;
							  // console.log('J topHeight:'+ topHeightH);
							  
							  
							  //得到tableswiper的高度
							  tableswiper.boundingClientRect(data1 => {
							  	  // console.log("得到布局位置信息" + JSON.stringify(data));
							  	  // console.log("节点离页面顶部的距离为" + data.top);
							  	  // 计算高度值并赋值
							  	  //this.mainClientHeight=data.height;
							  	  // this.mainClientHeight=data.height;
							  	  // console.log('tableswiper'+data1.height);
							  	  tableswiperH = data1.height;
								  console.log('S topHeight:'+ topHeightH);
							  	  console.log('S tableswiper:'+ tableswiperH);
								  console.log('windowHeight:'+ res.windowHeight)
								  return res.windowHeight - 50 - topHeightH - tableswiperH;
							  }).exec();
							  
						}).exec();
					}
				})
			}
		}
	}
</script>

<style lang="scss">

	//整体背景色
	.content{
		background-color: #000000;
		
	}
	//===================================
	//顶部高度隔离
	/* #ifdef APP-PLUS */
		.top-height{
			height: 60rpx;
		}
	/* #endif */
	/* #ifdef MP-WEIXIN */
		.top-height{
			height: 140rpx;
		}
	/* #endif */
	/* #ifdef H5 */
	.top-height{
		height: 80rpx;
	}
	/* #endif */
	//===================================
	
	.msgbox{
		width: 100%;
		background-color: #222222;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		height: 1092rpx;
		color: #888888;
	}
</style>
